<template>
  <mu-drawer :docked="false" :right="false" :z-depth="24" :open.sync="cateOpen" class="mainBox">
    <mu-list class="list list1">
      <mu-list-item button @click="clickToChoosed1(-1)">
        <mu-list-item-title class="item-title all"><svg-icon icon-class="cateList" />&nbsp;全部</mu-list-item-title>
      </mu-list-item>
      <mu-list-item v-for="(item1,index1) in cateList" :class="{active1:active1 === index1}" :key="index1" button @click="clickToChoosed1(index1)">
        <mu-list-item-title class="item-title">{{ item1.name }}<svg-icon v-if="item1.children" class="rightIcon" icon-class="icon_right" /></mu-list-item-title>
      </mu-list-item>
    </mu-list>
    <mu-list v-if="cate2List.length !== 0" class="list list2">
      <mu-list-item button @click="clickToChoosed2(-1)">
        <mu-list-item-title class="item-title all">全部</mu-list-item-title>
      </mu-list-item>
      <mu-list-item v-for="(item2,index2) in cate2List" :class="{active2:active2 === index2}" :key="index2" button @click="clickToChoosed2(index2)">
        <mu-list-item-title class="item-title">{{ item2.name }}<svg-icon v-if="item2.children" class="rightIcon" icon-class="icon_right" /></mu-list-item-title>
      </mu-list-item>
    </mu-list>
    <mu-list v-if="cate3List.length !== 0" class="list list3">
      <mu-list-item button @click="clickToChoosed3(-1)">
        <mu-list-item-title class="item-title all">全部</mu-list-item-title>
      </mu-list-item>
      <mu-list-item v-for="(item3,index3) in cate3List" :key="index3" button @click="clickToChoosed3(index3)">
        <mu-list-item-title class="item-title">{{ item3.name }}</mu-list-item-title>
      </mu-list-item>
    </mu-list>
  </mu-drawer>
</template>
<script>
export default {
  name: 'LeftCateBox',
  props: {
    list: {
      type: Array,
      default: function() {
        return []
      }
    }
  },
  data() {
    return {
      cateList: [],
      cateOpen: false,
      cate2List: [],
      cate3List: [],
      active2: 0,
      active1: 0
    }
  },
  watch: {
    'cateOpen': function() {
      if (this.cateOpen) {
        this.setDefaultData()
      }
    }
  },
  methods: {
    setDefaultData() {
      console.log('this.cateList123=', this.list)
      this.cateList = this.list
      this.active1 = 0
      this.active2 = 0
      this.cate2List = this.cateList[0].children ? this.cateList[0].children : []
      console.log('cate2List=', this.cate2List)
      this.cate3List = this.cate2List.length !== 0 && this.cate2List[0].children ? this.cate2List[0].children : []
      console.log('cate3List=', this.cate3List)
    },
    clickToChoosed1(index1) { // 选择一级分类
      this.cate2List = []
      this.cate3List = []
      this.active2 = 0
      if (index1 === -1) { // 选择全部
        this.$emit('getCateIdFromDialog', { index: -1, id: '' })
      } else {
        this.active1 = index1
        this.category_id = this.cateList[index1].category_id
        if (this.cateList[index1].children) {
          this.cate2List = this.cateList[index1].children
          if (this.cate2List[0].children) {
            this.cate3List = this.cate2List[0].children
          } else {
            this.cate3List = []
          }
          console.log(this.cate2List)
        } else {
          this.$emit('getCateIdFromDialog', { index: this.active1, id: this.cateList[this.active1].category_id })
          this.cate2List = []
        }
      }
    },
    // todo:没有点击第二季分类，直接点击第三级的全部选项，id传出的是一级的分类id
    clickToChoosed2(index2) { // 选择二级分类
      this.cate3List = []
      if (index2 === -1) { // 选择全部
        this.$emit('getCateIdFromDialog', { index: this.active1, id: this.cateList[this.active1].category_id })
        console.log()
      } else {
        this.active2 = index2
        this.category_id = this.cate2List[index2].category_id
        if (this.cate2List[index2].children) {
          this.cate3List = this.cate2List[index2].children
        } else {
          this.cate3List = []
          this.$emit('getCateIdFromDialog', { index: this.active1, id: this.category_id })
        }
      }
    },
    clickToChoosed3(index3) { // 选择三级分类
      if (index3 === -1) { // 选择全部
        this.$emit('getCateIdFromDialog', { index: this.active1, id: this.category_id })
      } else {
        this.$emit('getCateIdFromDialog', { index: this.active1, id: this.cate3List[index3].category_id })
      }
    }
  }
}
</script>
<style lang="scss">
  @import "src/styles/mixin.scss";
  .mainBox{
    height: 100%;
    border-radius: 0;
    margin-bottom: pxCalc(57px);
    z-index: 991!important;
    width: auto;
    display: flex;
    flex-direction: row;
    .list{
      overflow-y: scroll;
      -webkit-overflow-scrolling: touch;
      .item-title{
        font-size: pxCalc(14px);
        text-align: left;
        .rightIcon{
          position: absolute;
          right: pxCalc(5px);
          top: 50%;
          transform: translateY(-50%);
        }
      }
      .all{
        color: #ff7340;
        text-align: center;
      }
      .active1{
        font-weight: bold;
        background-color: #efefef;
        position: relative;
      }
      .active1:before{
        content: '';
        position: absolute;
        width: 3px;
        top: 50%;
        transform: translateY(-50%);
        height: 1.5em;
        background-color: #ff7340;
        left: 0;
      }
      .active2{
        font-weight: bold;
        background-color: #e7e7e7;
      }
    }
    .list::-webkit-scrollbar{
      display: none!important;
    }
    .list1{
      width: pxCalc(110px);
      background: #f8f8f8;
    }
    .list2{
      width: pxCalc(100px);
      transition: all 1s;
      background-color: #efefef;
    }
    .list3{
      width: pxCalc(90px);
      transition: all 1s;
      background-color: #e7e7e7;
    }
  }
</style>
